<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContentType() + '/webcon/resources/'}"/>
    <meta charset="UTF-8">
    <title>实时音乐</title>
    <link href="css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <style>
        .btn-large-dim {
            width: 80px;
            height: 80px;
            font-size: 10px;
            margin-bottom: 0px;
        }

        /*.left_content1 {
            height: 300px;
        }

        .left_content2 {
            height: 300px;
        }

        .right_content {
            height: 600px;
        }*/
    </style>


    <!--引入webuploader-->
    <link rel="stylesheet" type="text/css" href="widget/webuploader/webuploader.css">
    <script type="text/javascript" src="widget/webuploader/webuploader.min.js"></script>

    <!-- 引入ztree -->
    <link rel="stylesheet" href="widget/zTree/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="widget/zTree/jquery.ztree.all.min.js"></script>

    <!-- 数字选择插件-->
    <script type="text/javascript" src="widget/number/numberInput.js"></script>
    <script type="text/javascript" src="myjs/number.js"></script>

    <!-- 自定义js -->
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myupload.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mytask.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/task_real.js'}"></script>

    <script th:inline="javascript">
        $(function () {
            //动态计算高度
            autoHeight();

            //初始化实时音乐任务列表
            initRealTask();
        });
    </script>

    <!-- 音量选择控件 -->
    <!--<link href="css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">-->
    <!--<link href="css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">-->
    <!--<script src="js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>-->
    <!--<script>-->
        <!--$("#volume").ionRangeSlider({-->
            <!--min: 0,-->
            <!--max: 15,-->
            <!--from: 0,-->
            <!--postfix: "",-->
            <!--prettify: false,-->
            <!--hasGrid: false-->
        <!--});-->
    <!--</script>-->


</head>
<body>
<!-- 顶部 -->
<div class="row border-bottom white-bg dashboard-header myheader" style="padding: 10px 10px 10px 10px">


    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="open_Model(5);">
        <!-- data-toggle="modal" data-target="#myModal2" -->
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/ssyy_newtask.png"/><br/>
        新建任务
    </button>
   <!-- <button class="btn btn-primary dim btn-large-dim" type="button" onclick="open_update_Model();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/ssyy_edittask.png"/><br/>
        编辑任务
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="delete_task();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/ssyy_deltask.png"/><br/>
        删除任务
    </button>-->
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="isAction(1, 5);">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/dsyy_edittask.png"/><br/>
        编辑任务
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="isAction(2, 5);">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/dsyy_deltask.png"/><br/>
        删除任务
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="copy_task(realMusicHtml);">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/ssyy_copytask.png"/><br/>
        复制任务
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="action_task();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/ssyy_play.png"/><br/>
        手动执行
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="pause_task();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/ssyy_pause.png"/><br/>
        手动暂停
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="stop_task();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/ssyy_stop.png"/><br/>
        手动停止
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="pre_task();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/ssyy_pre.png"/><br/>
        上一曲
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="next_task();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/ssyy_next.png"/><br/>
        下一曲
    </button>
</div>
<!-- 工作区 -->
<div class="animated fadeInRight">
    <div class="row">
        <div class="col-lg-5" style="padding: 2px 2px 2px 2px; margin-bottom: 2px;">
            <div class="ibox float-e-margins" style="margin-bottom: 2px">
                <div class="ibox-content left_content1 h_2">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title" style="border-width: 0px 0px 0px;">
                            <h5>曲目列表</h5>
                        </div>
                        <div class="ibox-content" style="height: 300px; overflow:scroll; overflow-y: auto; overflow-x: auto;">

                            <table class="table">
                                <tbody id="mp3_list">
                                    <!-- TODO 曲目列表 -->
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-content left_content2 h_2">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title" style="border-width: 0px 0px 0px;">
                            <h5>终端列表</h5>
                        </div>
                        <div class="ibox-content" style="height: 300px; overflow:scroll; overflow-y: auto; overflow-x: auto;">

                            <table class="table">
                                <!--<thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>-->
                                <tbody id="clients_list">
                                    <!-- TODO 终端列表 -->
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7" style="padding: 2px 2px 2px 2px; margin-bottom: 2px;">
            <div class="ibox float-e-margins">
                <div class="ibox-content right_content h_1">


                    <div class="ibox-title" style="border-width: 0px 0px 0px;">
                        <label class="checkbox-inline">
                            <input type="radio" name="looptype" value="0" checked>
                            随机播放
                        </label>
                        <label class="checkbox-inline">
                            <input type="radio" name="looptype" value="1">
                            循环播放
                        </label>
                        <label class="checkbox-inline">
                            音量
                        </label>
                        <label class="checkbox-inline" style="width: 30%; margin-left: 0px; padding-left: 10px">
                            <!--<div id="volume"></div>-->
                            <div id="volume" class="mynumber" style="margin-bottom: 10px;"></div>
                        </label>
                        <label class="checkbox-inline">
                            <button type="button" class="btn btn-w-m btn-warning" onclick="update_task_volume();">修改</button>
                        </label>
                    </div>

                    <div class="ibox-content" style="padding-left: 0px; padding-right: 0px">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>任务标识</th>
                                <th>任务状态</th>
                                <th>持续时间</th>
                                <th>当前播放曲目</th>
                            </tr>
                            </thead>
                            <tbody id="task_list">
                            <!-- TODO 任务列表 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 弹出框 -->
<div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <!-- animated bounceInRight -->
        <!-- animated flipInY -->
        <div class="modal-content animated flipInY">
            <!-- 头部信息 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">实时音乐</h4>
            </div>
            <!-- 内容部分 -->
            <div class="modal-body" style="padding: 0px">
                <div class="row" style="margin: 0px;">
                    <div class="col-lg-6" style="padding: 4px;">
                        <div class="ibox float-e-margins" style="margin-bottom: 0px">
                            <div class="ibox-content" style="position: relative; height: 500px;">
                                <!-- 音乐上传 -->
                                <div class="btns">
                                    <button id="picker" type="button" class="btn btn-w-m btn-info">选择文件</button>
                                    <button id="upload_btn" class="btn btn-w-m btn-primary" onclick="start_upload();">
                                        开始上传
                                    </button>
                                </div>
                                <div class="ibox-content"
                                     style="padding-left: 0px; padding-right: 0px; padding-top: 10px; height: 400px; overflow:scroll; overflow-y: auto; overflow-x: auto;">

                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th colspan="2">上传列表</th>
                                        </tr>
                                        </thead>
                                        <tbody id="upload_list">
                                        </tbody>
                                    </table>
                                </div>
                                <div>
                                    <select id="loopType" class="form-control m-b" name="loopType">
                                        <option value="0">随机播放</option>
                                        <option value="1">循环播放</option>
                                    </select>
                                    <!--<label>
                                        <input type="radio" checked="checked" value="0" name="loopType">
                                        随机播放
                                    </label>
                                    <label style="margin-left: 20px">
                                        <input type="radio" checked="checked" value="1" name="loopType">
                                        循环播放
                                    </label>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6" style="padding: 4px">
                        <div class="ibox float-e-margins" style="margin-bottom: 0px">
                            <div class="ibox-content" style="height: 500px;">
                                <!-- 分控选择 -->
                                <form role="form" class="form-inline">
                                    <div class="form-group">
                                        <input type="text" placeholder="任务标识" id="taskname"
                                               class="form-control" style="width: 160px">
                                    </div>
                                    <div class="checkbox m-r-xs">
                                        <input type="checkbox" id="checkbox1" onclick="checkall(this.checked);">
                                        <label for="checkbox1">
                                            全选
                                        </label>
                                    </div>
                                </form>

                                <!-- 树形选择器 -->
                                <div id="ztree_div" class="ztree"
                                     style="height: 430px; overflow:scroll; overflow-y: auto; overflow-x: auto;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部按钮 -->
            <div class="modal-footer">
                <button type="button" id="submitBtn" class="btn btn-primary" onclick="submit_task();">提交</button>
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>